<template>
  <view class="header">
    <!-- <view class="logo">
     <image :src="LOGO" alt=""/>
     <view class="title">上海石煤</view>
   </view> -->
    <view class="gs">石洞口煤气制气安全管理信息化平台</view>
  </view>

  <view class="container">
    <uni-forms
      ref="formRef"
      label-position="left"
      :model="formData"
      :rules="rules"
    >
      <uni-forms-item label="用户名" name="username" required
        ><uni-easyinput
          type="text"
          v-model="formData.username"
          placeholder="请输入用户名"
      /></uni-forms-item>
      <uni-forms-item label="密码" name="password" required
        ><uni-easyinput
          type="password"
          v-model="formData.password"
          placeholder="请输入密码"
      /></uni-forms-item>
      <!--   <uni-forms-item label="验证码" name="code" required>
      <view class="imgcode">
        <uni-easyinput
          style="width: 50%"
          v-model="formData.code"
          placeholder="请输入验证码"
        />
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div>
      </view>
      </uni-forms-item> -->
    </uni-forms>
    <button type="primary" @click="submitForm">登 录</button>
  </view>

  <!-- <view class="footer">{{ appInfoSetting.developer }}版权所有</view> -->
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getCodeImg, keepPhoneInfo } from "@/api/autha.js";
import Cookies from "js-cookie";
import LOGO from "@/assets/logo.png";
import { useAuthStore } from "@/store/modules/auth.js";
import { useUserStore } from "@/store/modules/user.js";
import { router, HOME_PATH } from "@/router/index.js";
import { appInfoSetting } from "@/settings/app-info.js";
// import { BASE_URL_YQYP } from "@/utils/requset.js";

const formRef = ref();
const formData = ref({
  username: "",
  password: "",
  code: "",
  uuid: "",
});
formData.value.username = ref(uni.getStorageSync("username_login"));
formData.value.password = ref(uni.getStorageSync("password_login"));
const rules = ref({
  username: {
    rules: [{ required: true, errorMessage: "请输入姓名" }],
  },
  password: {
    rules: [{ required: true, errorMessage: "请输入密码" }],
  },
  // code: {
  //   rules: [{ required: true, errorMessage: "请输入验证码" }],
  // },
});

const authStore = useAuthStore();
const userStore = useUserStore();
function submitForm() {
  formRef.value
    .validate()
    .then((res) => {
      authStore.login({ ...res, uuid: uuid.value }).then((data) => {
        userStore.getUserInfo().then(() => {
          userStore.setPhoneId(phoneUuid.value);
          // keepPhoneInfo({
          //   equipmentId: phoneUuid.value,
          //   accountId: userStore.userId,
          // });
        });
        uni.setStorageSync("username_login", formData.value.username);
        uni.setStorageSync("password_login", formData.value.password);
        authStore.getInfo().then(() => {
          uni.showToast({
            title: "登录成功",
          });

          setTimeout(() => {
            router.reLaunch({ path: HOME_PATH });
          }, 100);

          // 同步登录一企一品账号
          // uni.request({
          //   url: `${BASE_URL_YQYP}/login`, 
          //   method: 'POST',
          //   data: {
          //     ...res,
          //     uuid: uuid.value
          //   },
          //   header: {
          //     'content-type': 'application/json',
          //   },
          //   success: (res) => {
          //     console.log('token: ', res.data.token)
          //     uni.setStorageSync('YQYP_TOKEN', res.data.token)

          //     setTimeout(() => {
          //       router.reLaunch({ path: HOME_PATH });
          //     }, 100);
          //   },
          //   fail: (err) => {
          //     console.error(err);
          //   }
          // })
        });
      });
    })
    .catch((err) => {
      console.log("表单错误信息：", err);
    });
}
const codeUrl = ref("");
const uuid = ref("");
const phoneUuid = ref("");
// const captchaEnabled = ref('')
function getCode() {
  getCodeImg().then((res) => {
    // captchaEnabled.value =
    //   res.captchaEnabled === undefined ? true : res.captchaEnabled;
    // if (captchaEnabled.value) {
    codeUrl.value = "data:image/gif;base64," + res.img;
    uuid.value = res.uuid;
    // }
  });
}
onMounted(() => {
  // #ifdef APP-PLUS
  plus.device.getInfo({
    success: (e) => {
      phoneUuid.value = e.uuid;
    },
    fail: (e) => {},
  });
  // #endif
  // getCode();
});
</script>

<style lang="scss" scoped>
page {
  background-color: #fff !important;
}

.header {
  padding: 120rpx 30rpx;
  height: 500rpx;
  position: relative;
  background-color: #fff;
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 70rpx;
      width: 350rpx;
      font-weight: 550;
      color: #14478c;
    }
    image {
      width: 300rpx;
      height: 300rpx;
    }
  }
  .gs {
    margin-top: 60px;
    text-align: center;
    font-size: 50rpx;
    color: #555779;
  }
  // background-image: url('../../static/loginbg.png');
  // background-size: contain;
}
.container {
  padding: 16px;
  background-color: #fff;
}

.footer {
  position: fixed;
  bottom: $uni-spacing-col-lg;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  font-size: $uni-font-size-sm;
}
.imgcode {
  display: flex;
  img {
    height: 35px;
  }
}
</style>
